<template>
  <div class="box">
    <el-row type="flex" justify="space-between">
      <el-col :span="6">
        <div class="heade">人数统计</div>
        <div class="mains">
          <div class="chart1"></div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="heade">新增人数</div>
        <div class="mains">
          <div class="chart2"></div>
        </div>
      </el-col>
      <el-col :span="11">
        <div class="heade">趋势</div>
        <div class="mains">
          <div class="chart3"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  methods: {
    charts1() {
      let chart = echarts.init(document.querySelector(".chart1"));
      let option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          left:'60%',
        top:'20%',
          orient: "vertical",
        },
        series: [
          {
            name: "人数统计",
            type: "pie",
            radius: ["40%", "70%"],
             center:['30%','50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "14",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "完成预约" },
              { value: 735, name: "预约逾期" },
              { value: 580, name: "失约" },
            ],
          },
        ],
      };
      chart.setOption(option);
    },

    charts2() {
      let chart = echarts.init(document.querySelector(".chart2"));
      let option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
        left:'60%',
        top:'20%',
          orient: "vertical",
        },
        series: [
          {
            name: "人数统计",
            type: "pie",
            center:['30%','50%'],
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "14",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "周一" },
              { value: 735, name: "周二" },
              { value: 580, name: "周三" },
              { value: 580, name: "周四" },
            ],
          },
        ],
      };
      chart.setOption(option);
    },
    chart3() {
      let chart = echarts.init(document.querySelector(".chart3"));
      let option = {
        xAxis: {
          type: "category",
          data: ["第一周", "第二周", "第三周", "第四周"],
        },
        yAxis: {
          type: "value",
          left:0,
        },
        series: [
          {
            data: [150, 230, 224, 218],
            type: "line",
          },
        ],
      };
      chart.setOption(option);
    },
  },
  mounted() {
    this.charts1();
    this.charts2();
    this.chart3()
  },
};
</script>

<style lang="scss" scoped>
.box{
  padding: 10px;
}
.el-col {
  background-color: #fff;
}
.heade {
  height: 50px;
  border-bottom: 1px solid #ddd;
  color: #555;
  line-height: 50px;
  padding-left: 30px;
}
.mains {
  box-sizing: border-box;
  height: 200px;
}
.chart1 {
  width: 100%;
  height: 200px;
}
.chart2 {
  width: 100%;
  height: 200px;
}
.chart3 {
  width: 100%;
  height: 200px;
}
</style>